<template>
  <el-pagination
    class="pagination"
    :page-size="pageSize"
    :page-sizes="pageSizes"
    background
    layout="total,sizes,prev, pager, next"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="onPageChange"
  >
  </el-pagination>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    total: {
      type: Number,
      required: true,
    },
    pageSize: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      pageSizes: [3, 10, 20, 50, 100],
    }
  },
  methods: {
    // 每页请求数量发生改变
    handleSizeChange(val) {
      this.$emit('size-change', val)
    },
    // 页数改变
    onPageChange(val) {
      this.$emit('page-change', val)
    },
  },
}
</script>

<style lang="less" scope>
.pagination {
  margin: 15px 0;
}
</style>
